<template>
  <div class="index">
    <header @click="showInput">
      <i class="iconfont icon-tianjia-"></i>
    </header>
    <div class="addItem" v-show="detailInput">
      <div class="addItem_rays"></div>
      <div class="addItem_box">
        <input @keyup="show($event)" type="text">
      </div>
      <div class="addItem_delete" @click="hideDetail">
        <i class="iconfont icon-shanchu"></i>
      </div>
    </div>
    <div class="addCheckbox">
      <ul>
  
        <li v-for="(item,index) in items">
          <label>
            <input type="checkbox" :checked="item.isChecked" @click="checkedFunction(index)">
            <span>{{item.name}}</span>
          </label>
        </li>
  
      </ul>
    </div>
  
    <!-- <vfooter></vfooter> -->
  </div>
</template>

<script>
// import vfooter from '../layouts/footer.vue'
import $ from 'jquery'
export default {
  // components: {
  //   vfooter
  // }
  data() {
    return {
      items: [],
      detailInput: false
    }
  },
  created() {
    //将重新获取的list并且获取的list不为空，把获取的list赋值给items
    if (localStorage.getItem('list') && localStorage.getItem('list') != "[]") {
      this.items = JSON.parse(localStorage.getItem('list'));
    }
  },
  methods: {
    showInput() {
      this.detailInput = true
    },
    hideDetail() {
      this.detailInput = false
    },
    // hideinput:function(){
    //    $("div.addItem.*").not("input").each(function(){
    //      $(this).hide();
    //    })
    // }
    checkedFunction(index) {
      // 传入的 index 为指向 将选择状态转换
      this.items[index].isChecked = this.items[index].isChecked ? false : true;
      // 将重新生成的 items 转成 json 格式的string 存入 localStorage
      localStorage.setItem("list", JSON.stringify(this.items));
    },
    show(e) {
      var input = $(".addItem_box").find("input");
      if (e.keyCode == 13) {
        this.add(input.val());
      }
    },
    add(text) {
      // 这里写入 数据的
      this.items.push({
        name: text,
        isChecked: false
      })
    }
  }
}

</script>
<style type="text/css">
header {
  position: inherit;
}

.index>header>i {
  right: -30rem;
  position: absolute;
  top: 1.3rem;
}




/* 输入框 */

.addItem {
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(7, 17, 27, 0.2);
}

.addItem_rays {
  width: 80%;
  height: 42%;
  border: solid tan;
  border-width: 0 3px;
  margin-left: 8%;
}

.addItem_box input {
  width: 86%;
  height: 42%;
  border: 0;
  font-size: 2.3rem;
  padding: 0 .5rem;
  margin-left: 5%;
}

.addItem_delete i {
  position: fixed;
  bottom: 18%;
  margin-left: 44%;
  font-size: 25px;
}




/* 添加列表 */

.addCheckbox ul {
  margin-top: 65px;
}




/* 复选框添加样式 */

input[type="checkbox"]:checked+span {
  text-decoration: line-through;
  color: #aaa;
}

input[type=checkbox] {
  visibility: hidden;
}
</style>